<template>
  <view class="flex-col page">
    <Confirm style="z-index: 1000;" v-if="confirmShow" :address="address" ref="confirmRef" @close="confirmShow=false" @confirm="handleConfirm"/>
    <view class="flex-col section">
      <view class="flex-row justify-center items-center relative section_3">
        <image
               class="image_4 pos"
               src="@/static/common/back.png"
               @click="handleBackClick" />
        <text class="text_2">Recharge</text>
      </view>
      <view class="flex-col section_4">
       <text class="self-start font">My address</text>
        <view class="flex-col justify-start items-center self-stretch text-wrapper">

          <u-input class="input-address" placeholder="Please fill in your on-chain address..." v-model="address" :disabled="binded"></u-input>
        </view>

        <view class="self-stretch divider"></view>
        <text class="self-stretch font_3 text_4">
          Note: Please fill in the correct address on your chain. If you make a mistake,You will not be able to recharge
          successfully and will not be able to receive benefits. Please be patient and fill out the form carefully.
        </text>
      </view>
    </view>
    <view class="flex-col relative group">
      <view class="flex-col justify-start items-center relative text-wrapper_2" @click="handleBind" v-if="!binded">
        <text class="font_4 text_5">Confirm To Fill In</text>
      </view>
      <view class="flex-col mt-29">
        <text class="self-start font_4 text_6">Platform Recharge Address</text>
        <view class="mt-8 flex-col self-stretch">
          <text class="font_3 text_7">
            To recharge, please copy the address and go to the corresponding platform to operate.
          </text>
          <view class="mt-12 flex-col">
            <view
              class="flex-row justify-between items-center mt-12 list-item">
              <view class="flex-col items-start">
                <text class="font text_8">USDT Address</text>
                <text class="mt-14 font_6">0xC177B4445c6A565Ec4F6cb6C3d49B8991a7F3C16</text>
              </view>
              <view class="flex-col justify-start items-center text-wrapper_3">
                <text class="font_5 text_9" @click="copy('0xC177B4445c6A565Ec4F6cb6C3d49B8991a7F3C16')">Copy</text>
              </view>
            </view>
            <view
              class="flex-row justify-between items-center mt-12 list-item">
              <view class="flex-col items-start">
                <text class="font text_8">SDT Address</text>
                <text class="mt-14 font_6">0xf5E48cfE7Cf8e53dF3aace676f0791A0B9B54B24</text>
              </view>
              <view class="flex-col justify-start items-center text-wrapper_3">
                <text class="font_5 text_9" @click="copy('0xf5E48cfE7Cf8e53dF3aace676f0791A0B9B54B24')">Copy</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { getAddress,bindAddress } from '@/service/mine'
import Confirm from './confirm.vue'
import Confirm2 from './confirm2.vue'
export default {
  components: { Confirm,Confirm2 },
  props: {},
  data() {
    return {
      address: '',
      addreeItems: [null, null],
      confirmShow: false,
      binded:false,
    };
  },
  mounted() {
    this.getAddressList();
  },
  methods: {
    handleBackClick() {
      uni.navigateBack()
    },
    handleBind() {
      if (!this.address) {
        uni.showToast({
          title: 'Please fill in your on-chain address',
          duration: 1500,
          icon: 'none'
        })
        return;
      }
      this.confirmShow = true;
      this.$nextTick(() => {
        if (this.$refs.confirmRef) {
          this.$refs.confirmRef.handleCountDownTime()
        }
      });
    },
    copy(address){
      const clipboard = navigator.clipboard
      if (clipboard) {
        clipboard.writeText(address).then(() => {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        })
      }
    },
    handleConfirm(){
      this.confirmShow= false;
      this.confirm2Show = true;
      this.$nextTick(() => {
        if (this.$refs.confirm2Ref) {
          this.$refs.confirm2Ref.handleCountDownTime()
        }
      });
    },
    async handleConfirm2(){
      await bindAddress(this.address);
    },
    async getAddressList() {
      const res = await getAddress();
      if (res.statusCode === 200) {
        this.address = res.data.address;
        this.binded = true
      }
    }
  },
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}

.mt-29 {
  margin-top: 1.81rem;
}

.page {
  background-image: url('@/static/icons/b-home.png');
  background-size: cover;
  padding-bottom: 10rem;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .section {
    padding-bottom: 1.88rem;

    .section_2 {
      padding: 1.13rem 0.94rem 1.13rem 2.25rem;
      background-color: #33333300;

      .text {
        line-height: 0.56rem;
      }

      .image {
        width: 1.06rem;
        height: 0.56rem;
      }

      .image_2 {
        width: 0.94rem;
        height: 0.56rem;
      }

      .image_3 {
        width: 1.5rem;
        height: 0.71rem;
      }
    }

    .section_3 {
      padding: 1rem 1rem 0.75rem;
      background-color: #ffffff00;

      .image_4 {
        border-radius: 0.5rem;
        width: 1.78rem;
        height: 1.78rem;
      }

      .pos {
        position: absolute;
        left: 0.98rem;
        top: 50%;
        transform: translateY(-50%);
      }

      .text_2 {
        color: #ffffff;
        font-size: 1.13rem;
        font-family: PingFang SC;
        line-height: 1.06rem;
      }
    }

    .section_4 {
      margin: 0.75rem 1rem 0;
      padding: 1.25rem 0.88rem 1rem 1rem;
      background-color: #ffffff33;
      border-radius: 1rem;
      box-shadow: 0rem -0.75rem 1.5rem #05dfff1a inset, 0rem 0.75rem 1.5rem #fb98ad26 inset,
        0rem 0.25rem 0.5rem #0000004d;
      backdrop-filter: blur(1rem);

      .input-address {
        padding: 6px 9px;
        width: 95%;
        height: 100%;
        border: none;

        /deep/ .uni-input-input {
          caret-color: red;
          caret-width: 3px;
          font-size: 1rem;
          font-family: PingFang SC;
          line-height: 0.93rem;
          color: #000000;
        }
      }

      .text-wrapper {
        margin-right: 0.13rem;
        margin-top: 0.63rem;
        padding: 0.5rem 0;
        background-color: #ffffff33;
        border-radius: 0.75rem;

        .font_2 {
          font-size: 0.75rem;
          font-family: PingFang SC;
          line-height: 0.69rem;
          color: #ffffff80;
        }
      }

      .text_3 {
        margin-top: 1.25rem;
      }

      .divider {
        margin-right: 0.13rem;
        margin-top: 1rem;
        background-color: #ffffff1a;
        height: 0.031rem;
      }

      .text_4 {
        margin-top: 1.13rem;
        line-height: 0.75rem;
      }
    }
  }

  .group {
    margin-top: -0.38rem;
    padding: 0 1rem;

    .text-wrapper_2 {
      padding: 1.13rem 0;
      background-image: linear-gradient(137.2deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
      border-radius: 0.75rem;
      box-shadow: 0rem 0rem 1rem #000000b3;

      .text_5 {
        line-height: 0.74rem;
      }
    }

    .font_4 {
      font-size: 1rem;
      font-family: PingFang SC;
      color: #ffffff;
    }

    .text_6 {
      line-height: 0.94rem;
    }

    .text_7 {
      line-height: 0.75rem;
    }

    .list-item {
      padding: 1rem 0.75rem;
      background-color: #ffffff26;
      border-radius: 0.75rem;

      &:first-child {
        margin-top: 0;
      }

      .text_8 {
        line-height: 0.7rem;
      }

      .font_6 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.55rem;
        color: #ffffff80;
      }

      .text-wrapper_3 {
        padding: 0.38rem 0;
        background-color: #ffffff33;
        border-radius: 0.38rem;
        box-shadow: 0rem -0.75rem 1.5rem #a20a6d1a inset;
        backdrop-filter: blur(1rem);
        width: 3.13rem;
        height: 1.31rem;
        border-left: solid 0.031rem #ffffff4d;
        border-right: solid 0.031rem #ffffff4d;
        border-top: solid 0.031rem #ffffff4d;
        border-bottom: solid 0.031rem #ffffff4d;

        .font_5 {
          font-size: 0.63rem;
          font-family: PingFang SC;
          line-height: 0.55rem;
          color: #ffffff;
        }

        .text_9 {
          line-height: 0.58rem;
        }
      }
    }
  }

  .font_3 {
    font-size: 0.63rem;
    font-family: PingFang SC;
    line-height: 0.69rem;
    color: #ffffff80;
  }

  .font {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.69rem;
    color: #ffffff;
  }
}
</style>